<template>
	<view class="container">

		<view class="content">
			<u-form labelPosition="left" labelWidth="60" :model="hirelist" :rules="rules" ref="product">
 
				<u-form-item label="盲盒图片:">
					<u-upload ref="product_img" name="product_img" maxCount="1" :fileList="filelist1" width="100"
						height="100" @delete="delxsz" @afterRead="readxsz" />
				</u-form-item>
				<!-- 名称 -->
				<u-form-item label="标题" prop="name">
					<u-input v-model="hirelist.name" ref="name" placeholder="请输入标题" />
				</u-form-item>
 

				<u-form-item label="最大值" prop="emission">
					<u-input v-model="hirelist.max" ref="gearbox" placeholder="请填写最大值" />
				</u-form-item>


				<u-form-item label="最小值" prop="displacement">
					<u-input v-model="hirelist.min" ref="displacement" placeholder="请填写最小值" />
				</u-form-item>


				<!-- 部门 -->
				<u-form-item label="左边" prop="store" borderBottom @click="showstore = true">
					<view class="">
						{{ inleft | status}}
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
 

				<u-icon slot="right" name="arrow-right"></u-icon>
				<!-- 品牌 -->
				<u-form-item label="右边" prop="brank" borderBottom @click="showbrank = true">
					<view class="">
						{{ inright | status}}
					</view>
 
					 
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
 
			

				<u-action-sheet :show="showstore" :actions="stolist" title="请选择左边" @close="showstore = false"
					@select="storeSelect()">
				</u-action-sheet>
				<u-action-sheet :show="showmore" :actions="morelist" title="请选择升级车辆" @close="showmore = false"
					@select="MoreSelect()">
				</u-action-sheet>

				<u-action-sheet :show="showbrank" :height="'600px'" :actions="branklist" title="请选择右边"
					@close="showbrank = false" @select="brankSelect()">
				</u-action-sheet>



				<!-- 提交按钮 -->
				<u-button text="修改商品" icon="pushpin" size="small" type="success" @click="product" />
			</u-form>
		</view>
		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
	import addVue from './add.vue';
	export default {
		onLoad(options) {
			this.auth = this.$u.auth.check();

			this.hireid = options.hireid ? options.hireid : 0;

			this.brank();

			this.info();

			this.upgradationlist();

			this.storelist();
		},

		onReady() {
			this.$refs.product.setRules(this.rules);
		},
		created() {
			this.timer = setInterval(() => {
				let a = this.$u.count.check();
				console.log(a);
			}, 15000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		data() {
			return {
				filelist: [],
				filelist1: [
					{
						url: '',
					}
				],
				showsellcolumn: false,
				showstore: false,
				sellcolumnlist: [{
						sellcolumn: 0,
						name: "正常",
					},
					{
						sellcolumn: 1,
						name: "推荐",
					},
				],
				showmore: false,
				auth: {},
				hireid: 0,
				branklist: [],
				showCalendar: false,
				brank_text: "",
				store_text: "",
				morelist: [], //升级车辆的列表
				stoid: null,
				brand_id: 0,
				 
				stolist: [],
				must_text: "",
			 
				num: 42,
				showbranktype: false,
				branktypelist: [],
				name: "",
				piclist1: [],
				hirelist: {

					brank: {
						name: "",
					},
					store: {
						name: "",
					},
				},
				showbrank: false,
				param1: "",
				param2: "",
				param3: "",
				sf: 0,
				piclist: [],
				description: "",
				price: 0,
				inleft:0,
				inright:0,
				
				rules: {
					description: {
						required: true,
						message: "不低于3个字",
						trigger: ["change"],
					},
					"store.name": {
						required: true,
						message: "请选择左边",
						trigger: ["blur", "change"],
					},
					"brank.name": {
						required: true,
						message: "请选择右边",
						trigger: ["blur", "change"],
					},
					name: {
						required: true,
						message: "请填写商品名称",
						trigger: ["blur", "change"],
					},

					max: {
						required: true,
						message: "最大值",
						trigger: ["blur", "change"],
					},
					min: {
						required: true,
						message: "最小值",
						trigger: ["blur", "change"],
					},

 
					spdate_text: {
						type: "string",
						min: 2,
						required: true,
						message: "请选择上牌时间",
						trigger: ["change"],
					},
				},
			};
		},
		methods: {
			calendarConfirm(e) {
				this.showCalendar = false;
				this.hirelist.spdate_text = `${e[0]} / ${e[e.length - 1]}`;
				this.$refs.product.validateField("spdate_text");
			},
			calendarClose() {
				this.showCalendar = false;
				this.$refs.product.validateField("spdate_text");
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			delxsz(e) {
				let list = this.filelist1.map(async (item, index) => {
					// this.filelist(index, 1)

					if (index == e.index) {
						// 删除数组中的某一项

						this.filelist1.splice(e.index, index);
						let data = {
							hireid: this.hireid,
							 
							url: e.file.url,
						};

						var result = await this.$u.api.blind.delxsz(data);

						if (result.code) {
							this.$refs.notice.show({
								type: "success",
								message: result.msg,
								duration: 1200,
								complete: () => {
									// 如果是最后一张图片就把其清空
									if ((e.index == 0 && index == 0)) {
										this.filelist1 = [];
									}
								},
							});
						} else {
							this.$refs.notice.show({
								type: "danger",
								message: result.msg,
								duration: 1200,
							});
						}
					}
				});
			},
			async readxsz(event) {
				//组装上传数据
				var data = {
					filePath: event.file.thumb,
					name: "product_img",
					header: {},
				};

				//调用接口
				var result = await this.$u.api.product.thumbs(data);

				if (result.code) {
					// 合并对象
					this.filelist1 = this.filelist1.concat({
						url: result.data
					});

					let userArray = Object.entries(this.filelist1).map(([key, value]) => {
						return {
							value
						};
					});

					userArray.forEach((item) => {
						// 截取想要部分路径
						let str = item.value.url.slice(24, 200);

						// 把想要的路径追加到数组
						this.piclist1=str;
					});
					// 数组的去重
					let qcarr = [...new Set(this.piclist1)];

					// 数组转化成字符串
					this.hirelist.drivinglicense = qcarr.join(",");
				} else {
					this.$refs.notice.show({
						type: "error",
						message: result.msg,
					});
					return false;
				}
			},


			brankSelect(e) {
			    //this.hirelist.brank.name = e.name;
				this.inright = e.id;
			},
			branktypeSelect(e) {
				this.hirelist.btypename_text = e.name;
				this.hirelist.btypeid = e.id;
			},
			storeSelect(e) {
				 
				//this.hirelist.store.name = e.name;
				this.inleft = e.id;
			},
			MoreSelect(e) {
				 
				//this.must_text = e.name;
				this.hirelist.mustid = e.id;
			},
			product() {
				this.$refs.product
					.validate()
					.then(async () => {
						var data = {
							 
							id: this.hireid,
							name: this.hirelist.name,
							min: this.hirelist.min,
							max: this.hirelist.max,
							inleft: this.inleft,
							inright: this.inright,
							thumb: this.piclist1,
						};

						let result = await this.$u.api.blind.edit(data);

						if (result.code) {
							this.$refs.notice.show({
								type: "success",
								message: result.msg,
								duration: 1000,
								complete: () => {
									//返回当前页面
									uni.$u.route({
										type: "reLaunch",
										url: "/pagesC/product/blind/edit",
										params: {
											hireid: this.hireid,
										},
									});
								},
							});
						} else {
							this.$refs.notice.show({
								type: "danger",
								message: result.msg,
								duration: 2000,
							});
						}
					})
					.catch(() => {
						uni.$u.toast("效验失败");
					});
			},
			async storelist() {
				let data = {
					adminid: this.auth.id,
					//stoid: this.auth.stoid,
				};
				let result = await this.$u.api.blind.storelist(data);
				console.log(result)
				if (result.code) {
					this.stolist = result.data;
				} else {
					this.$refs.notice.show({
						type: "danger",
						message: result.msg,
					});
				}
			},
			async upgradationlist() {
				let data = {
					adminid: this.auth.id,
					stoid: this.auth.stoid,
				};
				let result = await this.$u.api.hire.upgradation(data);

				if (result.code) {
					this.morelist = result.data;
				} else {
					this.$refs.notice.show({
						type: "danger",
						message: result.msg,
					});
				}
			},
			sellcolumnSelect(e) {
				this.hirelist.sellcolumn_text = e.name;
				this.hirelist.sellcolumn = e.sellcolumn;
				console.log(this.hirelist.sellcolumn)
			},
			hideKeyboard() {
				uni.hideKeyboard();
			},

			async brank() {
				let result = await this.$u.api.blind.branklist();

				if (result.code) {
					this.branklist = result.data;
				} else {
					this.$refs.notice.show({
						type: "danger",
						message: result.msg,
					});
				}
			},
			// 单个商品
			async info() {
				let data = {
					hireid: this.hireid,
				};
				let result = await this.$u.api.blind.find(data);
			 
 
				if (result.code) {
					this.hirelist = result.data;
					this.inleft=result.data.inleft;
					this.inright=result.data.inright;
				 
			 
 
			
				 
			 
				this.filelist1[0].url = 'https://luxuries.h1668.com'+ result.data.thumb
				 
				} else {
					this.$refs.notice.show({
						type: "warning",
						message: result.msg,
					});
				}
			},
		},
		filters: {
			status: function(str) {// 格式化科室
				const status = {
					"1": "显示",
					"0": "隐藏"
				}
				return status[str];
			}
		}
	};
</script>

<style>
	.content {
		padding: 20px;
	}

	.container {
		height: 100%;
		margin: 0 50rpx;
		box-sizing: border-box;
	}

	.avatar {
		text-align: center;
	}

	.u-avatar {
		margin: 80rpx auto 40rpx;
	}

	.xcx {
		width: 200rpx;
		height: 200rpx;
		margin: 80rpx auto 40rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.nickname {
		font-size: 14px;
		text-align: center;
	}

	.title {
		text-align: center;
		margin: 40rpx 0;
		font-size: 14rpx;
	}

	.avatar .u-upload {
		justify-content: center;
		align-items: center;
		margin: 3em auto;
	}

	/* .u-form-item__body__left__content__label.data-v-5e7216f1 {
	width: 75px;
} */

	.vedio .u-upload {
		justify-content: center;
		align-items: center;
		margin: 0.3em auto;
	}

	.vedio {
		text-align: center;
	}

	.u-vedio {
		margin: 80rpx auto 40rpx;
	}
</style>